<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title></title>
	    <script src="./js/common/axios.min.js"></script>
        <script src="./js/common/vue.js"></script>
        <script src="./js/common/template.js"></script>
        <script src="./js/common/vue-resource.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
        <script type="text/javascript" src="js/common/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        <link rel="stylesheet" href="css/common/media.css">
        <style>
            
        </style>
    </head>
    <body>

        <div id="zgw">
            <div id="palace" class="flex">
                <v-nav></v-nav>
                <v-main></v-main>
            </div>
        </div>

        <template id="vMain">
            <div class="content overAuto">
                <div class="bfr">
                    <div class="fltrBox white flex flex-wrap box">
                        <div class="fg flex flex-align-items">
                            账户 <div class="inp"><input type="text" v-model="account" placeholder="请输入"></div>
                        </div>
                        
                        <div class="fg flex flex-align-items">
                            截止时间
                            <div class="inp input-group date" id='datetimepicker1'>
                                <span class="fill input-group-addon">
                                    <span class="glyphicon vc glyphicon-calendar"></span>
                                </span>
                                <input type='text' class="rptTime" class="timeInput" id="date"/>
                            </div>                        
                        </div>
                        
                        <div class="blue btn" @click="search">查询</div>
                    </div>
                    <div class="tableBox overAuto">
                        <table class="white">
                            <thead>
                                <!--
                                <td>
                                    <div class="chsBox"><p class="chs"><img src="img/gou.png"></p></div>
                                </td>
                                -->
                                <td v-for="(item,i) in thd">
                                    <div :style="'min-width:' + item.width + 'px'">{{item.name}}</div>
                                </td>
                            </thead>
                            <tbody>
                                <tr v-for="(item,i) in tblData">
                                    <td v-for="(value,key) in item" :class="[key == 'status'?'status':'',key == 'file'?'file':'']">
                                        <div>
                                            <template v-if="key == 'status'">
                                                {{statusAry[value]}}
                                            </template>
                                            <template v-else-if="key == 'btns'">
                                                <div class="btns">
                                                    <span :class="['btn',bItm.cls]" v-for="(bItm,b) in value">{{bItm.name}}</span>
                                                </div>
                                            </template>
                                            <template v-else>{{value}}</template>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="aft" v-if="info && curInd != undefined">
                    <p class="ttl1">资金流水明细详情</p>
                    <div class="box white">
                        <p class="ttl2">委托方资料</p>
                        <div class="valBox half flex">
                            <div class="fv flex"><span class="lbl">账户名</span> <span class="val">宁波某某某公司</span></div>
                            <div class="fv flex"><span class="lbl">账户</span> <span class="val">{{info.account}}</span></div>
                            <div class="fv flex"><span class="lbl">收入</span> <span class="val">{{info.income}}</span></div>
                            <div class="fv flex"><span class="lbl">交易时间</span> <span class="val">{{info.payTime}}</span></div>
                            <div class="fv flex"><span class="lbl">账户余额</span> <span class="val">{{info.cashRest}}</span></div>
                            <div class="fv flex"><span class="lbl">交易网点</span> <span class="val">{{info.payAddr}}</span></div>
                            <div class="fv flex"><span class="lbl">摘要</span> <span class="val">{{info.des}}</span></div>
                            <div class="fv flex"><span class="lbl">备注</span> <span class="val">{{info.mark}}</span></div>
                            <div class="fv flex"><span class="lbl">附件</span> <div class="upld uplded"><div class="upBtn vc">文件上传<input type="file" id="resume" class="fill"></div> <p class="fileName">某某某凭证.pdf</p></div></div>
                        </div>
                    </div>
                    <div class="box white">
                        <p class="ttl2">对方账户</p>
                        <div class="valBox">
                            <div class="fv flex"><span class="lbl">开户银行名称</span> <span class="val">宁波某某某公司</span></div>
                            <div class="fv flex"><span class="lbl">账号</span> <span class="val">5455452556652354112</span></div>
                        </div>
                    </div>
                    <div class="btns">
                        <p @click="cancel" class="cancel btn">返回</p>
                    </div>
                </div>
            </div>
        </template>
        
        <script src="js/common/swiper.js"></script>
        <script src="./js/common/dataUrl.js"></script>
        <script src="js/common/header.js"></script>
        <script src="js/common/footer.js"></script>
        <script>
            
            var picker1;
            var add = null;
            var contn = new Vue({
                el:'#zgw',
                data:{
                
                },
                methods:{
                    
                },
                mounted:function(){
                    ifMounted = true;
                },
                components:{
                    vMain:{
                        template: '#vMain',
                        data:function(){
                            return{
                                optInd:0,
                                account:'',
                                statusAry:['全部','待审批','已审批'],
                                thd:[
                                    {name:'交易时间',width:140},
                                    {name:'支出',width:120},
                                    {name:'收入',width:120},
                                    {name:'本账户户名/账户',width:160},
                                    {name:'账户余额',width:120},
                                    {name:'交易网点',width:120},
                                    {name:'摘要',width:120},
                                    {name:'备注',width:120},
                                    {name:'操作',width:150},
                                ],
                                cashRest:552154,
                                info:'',
                                tblData:[
                                    {payTime:this.timeTrans((new Date()).getTime()),pay:'-',income:'2,154',account:'1235454454511112',cashRest:'552,154',payAddr:'某某支行',des:'转账存入',mark:'投资款',btns:[{name:'查看',cls:'read orange'}]},
                                ],
                                curInd:undefined
                            }
                        },
                        methods:{
                            formatPrice(price){
                               return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                            },
                            cancel(){
                                swtActive('#palace .content .bfr');
                                this.curInd = undefined
                            },
                            timeTrans(time){
                                var date = new Date(time);
                                var seperator1 = "-";
                                var seperator2 = ":";
                                var month = date.getMonth() + 1<10? "0"+(date.getMonth() + 1):date.getMonth() + 1;
                                var strDate = date.getDate() < 10? "0" + date.getDate():date.getDate();
                                var hrs = date.getHours() < 10?"0" + date.getHours():date.getHours();
                                var mins = date.getMinutes() < 10?"0" + date.getMinutes():date.getMinutes();
                                var scds = date.getSeconds() < 10?"0" + date.getSeconds():date.getSeconds();
                                var currentdate = date.getFullYear() + '-' + month + '-' + strDate + " " +  hrs + ':' + mins + ':' + scds;
                                return currentdate;
                            },
                            search(){
                                var This = this;
                                $('table tbody tr').removeClass('hidden');
                                var rptTime = new Date($('.rptTime').val()).getTime();
                                this.tblData.forEach(function(item,i){
                                    if(
                                        (rptTime && new Date(item.payTime.split(' ')[0]).getTime() > rptTime)
                                        ||
                                        (This.account.replace(/\s+/g,'').length && item.account.indexOf(This.account) < 0)
                                    ){
                                        $('table tbody tr').eq(i).addClass('hidden');
                                    }
                                })
                            }
                        },
                        mounted(){
                            var This = this;
                            $('table .btn').click(function(){
                                var cls = $(this)[0].className;
                                var ind = $(this).parents('tr').index();
                                if(cls.indexOf('read') >= 0){
                                    This.curInd = ind;
                                    This.info = This.tblData[ind];
                                    swtActive('#palace .content .bfr');
                                    setTimeout(function(){
                                        $('.submit').click(function(){
                                            This.info.status = 2;
                                            var newList = This.tblData;
                                            newList[This.curInd].status = 2;
                                            This.tblData = newList;
                                            showModel('提交成功');
                                        })
                                    },10)
                                    
                                }
                            })

                            add = setInterval(function(){
                                var list = This.tblData;
                                var obj = JSON.parse(JSON.stringify(This.tblData[This.tblData.length - 1]));
                                var newIncome = parseInt(Math.random() * 10000);
                                console.log(newIncome);
                                obj.income = newIncome;
                                obj.cashRest = Number(obj.cashRest.split(',').join('')) + newIncome;
                                obj.payTime = This.timeTrans((new Date()).getTime());
                                obj.income = This.formatPrice(obj.income);
                                obj.cashRest = This.formatPrice(obj.cashRest);
                                list.push(obj);
                                This.tblData = list;
                            },3000)
                        }
                    },

                }
            })
            
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>